import React, { PropTypes } from 'react'
import { Form, Button, Row, Col,DatePicker,Select } from 'antd'
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
const { MonthPicker, RangePicker } = DatePicker;

class customDatePicker extends React.Component {
  constructor (props) {
    super(props);
    //计算默认值
    this.type=props.type;
    this.yearStart=this.getYear();
    this.yearEnd=this.getYear();
    this.monthStart=1;
    this.monthEnd=3;

    this.startAt=props.startAt;
    this.endAt=props.endAt
  }
  getYear=()=>{
     var dd = new Date();
     dd.setDate(dd.getDate());
     var y = dd.getFullYear();

     return y
  }
  onChange = (field, value) => {
   
    this.setState({
        [field]:value
    });
    this[field]=value;

    this.props.onTimeChange(this.startAt,this.endAt)
  };
  onStartChange = (date,dateString) => {

    this.onChange('startAt', dateString);

  };

  onEndChange = (date,dateString) => {

     if(this.type=="day"){
         dateString=dateString.split(" ")[0]+" 23:59:59"
     }
    this.onChange('endAt', dateString);
  };
  onSelectChage=(type,value)=>{
      if(type=='monthStart'){
         this[type]=(value-1)*3+1
      }else if(type=='monthEnd'){
         this[type]=value*3
      }else{
        this[type]=value
      }
      this.props.onTimeChange(this.yearStart+'-'+this.monthStart,this.yearEnd+'-'+this.monthEnd)
  };
  onYearSelectChage=(type,value)=>{
      this[type]=value
      this.props.onTimeChange(this.yearStart,this.yearEnd)
  };
  renderYear=()=>{
    let array=[];
     var dd = new Date();
     dd.setDate(dd.getDate());
     var y = dd.getFullYear();
     for(var i=y;i>=y-30;i--){
         array.push(<Select.Option key={i.toString()} value={i.toString()}>{i}</Select.Option>)
     }
     return array
  };
  renderYear2=()=>{
    let array=[];
     var dd = new Date();
     dd.setDate(dd.getDate());
     var y = dd.getFullYear()-1;

     for(var i=y;i>=y-30;i--){
         array.push(<Select.Option key={i.toString()} value={i.toString()}>{i}</Select.Option>)
     }
     return array
  };
  shouldComponentUpdate(nextProps,nextState){
    if(this.type!=nextProps.type){
        this.startAt=nextProps.startAt;
        this.endAt=nextProps.endAt
    }
    this.type=nextProps.type;

    return true
  }
  componentDidUpdate(){

  }
  componentDidMount(){

  }
 render(){
    const activeYear=this.getYear()+"";
    const activeYear2=(this.getYear()-1)+"";
  if(this.type=='hour'||this.type==undefined){

     const dateFormatString='YYYY-MM-DD HH:00:00';
     return (
        <Row gutter={24} style={{marginTop:10,marginBottom:20}}>
            <Col lg={24} md={24} sm={24} xs={24} style={{paddingLeft:24,paddingRight:24}}>
                <DatePicker
                    key='d1'
                    allowClear={false}
                    showTime
                    format={dateFormatString}
                    onChange={this.onStartChange}
                    value={moment(this.startAt, dateFormatString)}
                    />
                    <span style={{marginLeft:10,marginRight:10}}>至</span>
                <DatePicker
                    key='d2'
                    allowClear={false}
                    showTime
                    format={dateFormatString}
                    onChange={this.onEndChange}
                    value={moment(this.endAt, dateFormatString)}
                    />
            </Col>
        </Row>
      )
  }
  if(this.type=='day'||this.type=='day2'){


     const dateFormatString='YYYY-MM-DD';
     return (
        <Row gutter={24} style={{marginTop:10,marginBottom:20}}>
            <Col lg={24} md={24} sm={24} xs={24} style={{paddingLeft:24,paddingRight:24}}>
                <DatePicker
                    key='d3'
                    allowClear={false}
                    format={dateFormatString}
                    onChange={this.onStartChange}
                    value={moment(this.startAt, dateFormatString)}
                    />
                    <span style={{marginLeft:10,marginRight:10}}>至</span>
                <DatePicker
                    key='d4'
                    allowClear={false}
                    format={dateFormatString}
                    onChange={this.onEndChange}
                    value={moment(this.endAt, dateFormatString)}
                    />
            </Col>
        </Row>
      )
  }
  //本月前两个月
  if(this.type=='month'){

     const dateFormatString='YYYY-MM';
     return (
        <Row gutter={24} style={{marginTop:10,marginBottom:20}}>
            <Col lg={24} md={24} sm={24} xs={24} style={{paddingLeft:24,paddingRight:24}}>
                <MonthPicker
                    key='d5'
                    allowClear={false}
                    format={dateFormatString}
                    onChange={this.onStartChange}
                    value={moment(this.startAt, dateFormatString)}
                    />
                    <span style={{marginLeft:10,marginRight:10}}>至</span>
                <MonthPicker
                    key='d6'
                    allowClear={false}
                    format={dateFormatString}
                    onChange={this.onEndChange}
                    value={moment(this.endAt, dateFormatString)}
                    />
            </Col>
        </Row>
      )
  }
  if(this.type=='quarter'){

     return (
        <Row gutter={24} style={{marginTop:10,marginBottom:20}}>
            <Col lg={24} md={24} sm={24} xs={24} style={{paddingLeft:24,paddingRight:24}}>
                <Select key='s5'
                onChange={(v)=>this.onSelectChage('yearStart',v)}
                defaultValue={activeYear}
                style={{ width: 100 }}>
                   {this.renderYear()}
                </Select>
                <span style={{marginLeft:5,marginRight:5}}></span>
                <Select key='s1'
                onChange={(v)=>this.onSelectChage('monthStart',v)}
                defaultValue="1"
                style={{ width: 100 }}>
                    <Select.Option value="1">一季度</Select.Option>
                    <Select.Option value="2">二季度</Select.Option>
                    <Select.Option value="3">三季度</Select.Option>
                    <Select.Option value="4">四季度</Select.Option>
                </Select>
                <span style={{marginLeft:10,marginRight:10}}>至</span>
                <Select key='s6'
                onChange={(v)=>this.onSelectChage('yearEnd',v)}
                defaultValue={activeYear}
                style={{ width: 100 }}>
                    {this.renderYear()}
                </Select>
                <span style={{marginLeft:5,marginRight:5}}></span>
                <Select key='s2'
                onChange={(v)=>this.onSelectChage('monthEnd',v)}
                defaultValue="1" style={{ width: 100 }}>
                    <Select.Option value="1">一季度</Select.Option>
                    <Select.Option value="2">二季度</Select.Option>
                    <Select.Option value="3">三季度</Select.Option>
                    <Select.Option value="4">四季度</Select.Option>
                </Select>
            </Col>
        </Row>
      )
  }
  if(this.type=='halfyear'||this.type=='year'){

     return (
        <Row gutter={24} style={{marginTop:10,marginBottom:20}}>
            <Col lg={24} md={24} sm={24} xs={24} style={{paddingLeft:24,paddingRight:24}}>
                <Select key ='s3' defaultValue={activeYear2} onChange={(v)=>this.onYearSelectChage('yearStart',v)} style={{ width: 100 }}>
                   {this.renderYear2()}
                </Select>

                <span style={{marginLeft:10,marginRight:10}}>至</span>
                <Select key='s4' defaultValue={activeYear2} onChange={(v)=>this.onYearSelectChage('yearEnd',v)} style={{ width: 100 }}>
                    {this.renderYear2()}
                </Select>

            </Col>
        </Row>
      )
  }


}
}

export default customDatePicker
